<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=696253
-->
<head>
  <meta charset="utf-8">
  <title>Test align/justify-items/self/content computed values</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body style="position:relative">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
<style>
#flexContainer, #flexContainerGrid { display: flex; position:relative; }
#gridContainer, #gridContainerFlex { display: grid; position:relative; }
#display b, #absChild { position:absolute; }
</style>
<div id="display">
  <div id="myDiv"></div>
  <div id="flexContainer"><a></a><b></b></div>
  <div id="gridContainer"><a></a><b></b></div>
  <div id="flexContainerGrid"><a style="diplay:grid"></a><b style="diplay:grid"></b></div>
  <div id="gridContainerFlex"><a style="diplay:flex"></a><b style="diplay:flex"></b></div>
</div>
<div id="absChild"></div>
<pre id="test">
<script type="application/javascript">
"use strict";

/*
 * Utility function for getting computed style of "align-self":
 */
function getComputedAlignSelf(elem) {
  return window.getComputedStyle(elem, "").alignSelf;
}
function getComputedAlignItems(elem) {
  return window.getComputedStyle(elem, "").alignItems;
}
function getComputedAlignContent(elem) {
  return window.getComputedStyle(elem, "").alignContent;
}
function getComputedJustifySelf(elem) {
  return window.getComputedStyle(elem, "").justifySelf;
}
function getComputedJustifyItems(elem) {
  return window.getComputedStyle(elem, "").justifyItems;
}
function getComputedJustifyContent(elem) {
  return window.getComputedStyle(elem, "").justifyContent;
}

/**
 * Test behavior of 'align-self:auto' (Bug 696253 and Bug 1304012)
 * ===============================================
 *
 * In a previous revision of the CSS Alignment spec, align-self:auto
 * was required to actually *compute* to the parent's align-items value --
 * but now, the spec says it simply computes to itself, and it should
 * only get converted into the parent's align-items value when it's used
 * in layout.  This test verifies that we do indeed have it compute to
 * itself, regardless of the parent's align-items value.
 */

/*
 * Tests for a block node with a parent node:
 */
function testGeneralNode(elem) {
  // Test initial computed style
  // (Initial value should be 'auto', which should compute to itself)
  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
     "initial computed value of 'align-self' should be 'auto'");

  // Test value after setting align-self explicitly to "auto"
  elem.style.alignSelf = "auto";
  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
     "computed value of 'align-self: auto' should be 'auto'");
  elem.style.alignSelf = ""; // clean up

  // Test value after setting align-self explicitly to "inherit"
  elem.style.alignSelf = "inherit";
  if (elem.parentNode && elem.parentNode.style) {
    is(getComputedAlignSelf(elem), getComputedAlignSelf(elem.parentNode),
       elem.tagName + ": computed value of 'align-self: inherit' " +
       "should match the value on the parent");
  } else {
    is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
       "computed value of 'align-self: inherit' should be 'auto', " +
       "when there is no parent");
  }
  elem.style.alignSelf = ""; // clean up
}

/*
 * Tests that depend on us having a parent node:
 */
function testNodeThatHasParent(elem) {
  // Sanity-check that we actually do have a styleable parent:
  ok(elem.parentNode && elem.parentNode.style, elem.tagName + ": " +
     "bug in test -- expecting caller to pass us a node with a parent");

  // Test initial computed style when "align-items" has been set on our parent.
  // (elem's initial "align-self" value should be "auto", which should compute
  // to its parent's "align-items" value, which in this case is "center".)
  elem.parentNode.style.alignItems = "center";
  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
     "initial computed value of 'align-self' should be 'auto', even " +
     "after changing parent's 'align-items' value");

  // ...and now test computed style after setting "align-self" explicitly to
  // "auto" (with parent "align-items" still at "center")
  elem.style.alignSelf = "auto";
  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
     "computed value of 'align-self: auto' should remain 'auto', after " +
     "being explicitly set");

  elem.style.alignSelf = ""; // clean up
  elem.parentNode.style.alignItems = ""; // clean up

  // Finally: test computed style after setting "align-self" to "inherit"
  // and leaving parent at its initial value which should be "auto".
  elem.style.alignSelf = "inherit";
  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
     "computed value of 'align-self: inherit' should take parent's " +
     "computed 'align-self' value (which should be 'auto', " +
     "if we haven't explicitly set any other style");
  elem.style.alignSelf = ""; // clean up
 }

/*
 * Main test function
 */
function main() {
  // Test the root node
  // ==================
  // (It's special because it has no parent style context.)

  var rootNode = document.documentElement;

  // Sanity-check that we actually have the root node, as far as CSS is concerned.
  // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that
  // we inherit style from.)
  ok(!rootNode.parentNode.style,
     "expecting root node to have no node to inherit style from");

  testGeneralNode(rootNode);

  // Test the body node
  // ==================
  // (It's special because it has no grandparent style context.)

  var body = document.getElementsByTagName("body")[0];
  is(body.parentNode, document.documentElement,
     "expecting body element's parent to be the root node");

  testGeneralNode(body);
  testNodeThatHasParent(body);

  // 
  // align-items/self tests:
  //
  //// Block tests
  var elem = document.body;
  var child = document.getElementById("display");
  var abs = document.getElementById("absChild");
  is(getComputedAlignItems(elem), 'normal', "default align-items value for block container");
  is(getComputedAlignSelf(child), 'auto', "default align-self value for block child");
  is(getComputedAlignSelf(abs), 'auto', "default align-self value for block container abs.pos. child");
  elem.style.alignItems = "end";
  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
  elem.style.alignItems = "left";
  is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for a block");
  is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child");
  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
  elem.style.alignItems = "right";
  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
  elem.style.alignItems = "right safe";
  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
  elem.style.alignItems = "";
  child.style.alignSelf = "left";
  is(getComputedAlignSelf(child), 'left', "align-self:left computes to left for block child");
  child.style.alignSelf = "right";
  is(getComputedAlignSelf(child), 'right', "align-self:right computes to right for block child");
  child.style.alignSelf = "";
  abs.style.alignSelf = "right";
  is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right for block container abs.pos. child");

  //// Flexbox tests
  function testFlexAlignItemsSelf(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container");
    is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item");
    is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child");
    elem.style.alignItems = "flex-end";
    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for flex container child");
    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for flex container abs.pos. child");
    elem.style.alignItems = "left";
    is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for flex container");
    // XXX TODO: add left/right tests (bug 1221565)
    elem.style.alignItems = "";
  }
  testFlexAlignItemsSelf(document.getElementById("flexContainer"));
  testFlexAlignItemsSelf(document.getElementById("flexContainerGrid"));

  //// Grid tests
  function testGridAlignItemsSelf(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedAlignItems(elem), 'normal', "default align-items value for grid container");
    is(getComputedAlignSelf(item), 'auto', "default align-self value for grid item");
    is(getComputedAlignSelf(abs), 'auto', "default align-self value for grid container abs.pos. child");
    elem.style.alignItems = "end";
    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
    elem.style.alignItems = "left";
    is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for grid container");
    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
    elem.style.alignItems = "right";
    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
    elem.style.alignItems = "right safe";
    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
    item.style.alignSelf = "left";
    is(getComputedAlignSelf(item), 'left', "align-self:left computes to left on grid item");
    item.style.alignSelf = "right";
    is(getComputedAlignSelf(item), 'right', "align-self:right computes to right on grid item");
    item.style.alignSelf = "right safe";
    is(getComputedAlignSelf(item), 'right safe', "align-self:'right safe' computes to 'right safe' on grid item");
    item.style.alignSelf = "";
    abs.style.alignSelf = "right";
    is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right on grid container abs.pos. child");
    abs.style.alignSelf = "";
    elem.style.alignItems = "";
    item.style.alignSelf = "";
  }
  testGridAlignItemsSelf(document.getElementById("gridContainer"));
  testGridAlignItemsSelf(document.getElementById("gridContainerFlex"));

  //
  // justify-items/self tests:
  //
  //// Block tests
  var elem = document.body;
  var child = document.getElementById("display");
  var abs = document.getElementById("absChild");
  is(getComputedJustifyItems(elem), 'normal', "default justify-items value for block container");
  is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child");
  is(getComputedJustifySelf(abs), 'auto', "default justify-self value for block container abs.pos. child");
  elem.style.justifyItems = "end";
  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
  elem.style.justifyItems = "left";
  is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself on a block");
  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
  elem.style.justifyItems = "right";
  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
  elem.style.justifyItems = "right safe";
  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
  elem.style.justifyItems = "";
  child.style.justifySelf = "left";
  is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child");
  child.style.justifySelf = "right";
  is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child");
  child.style.justifySelf = "";
  abs.style.justifySelf = "right";
  is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on block container abs.pos. child");

  //// Flexbox tests
  function testFlexJustifyItemsSelf(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container");
    is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item");
    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child");
    elem.style.justifyItems = "flex-end";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for flex container abs.pos. child");
    elem.style.justifyItems = "left";
    is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for flex container");
    elem.style.justifyItems = "right safe";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
    // XXX TODO: add left/right tests (bug 1221565)
    elem.style.justifyItems = "";
  }
  testFlexJustifyItemsSelf(document.getElementById("flexContainer"));
  testFlexJustifyItemsSelf(document.getElementById("flexContainerGrid"));

  //// Grid tests
  function testGridJustifyItemsSelf(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedJustifyItems(elem), 'normal', "default justify-items value for grid container");
    is(getComputedJustifySelf(item), 'auto', "default justify-self value for grid item");
    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for grid container abs.pos. child");
    elem.style.justifyItems = "end";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    elem.style.justifyItems = "left";
    is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for grid container");
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    elem.style.justifyItems = "legacy left";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    elem.style.justifyItems = "right";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    elem.style.justifyItems = "right safe";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    elem.style.justifyItems = "legacy right";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    elem.style.justifyItems = "legacy center";
    item.style.justifyItems = "inherit";
    abs.style.justifyItems = "inherit";
    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
    is(getComputedJustifyItems(elem), 'legacy center', "justify-items computes to itself grid container");
    is(getComputedJustifyItems(item), 'legacy center', "justify-items inherits including legacy keyword to grid item");
    is(getComputedJustifyItems(abs), 'legacy center', "justify-items inherits including legacy keyword to grid container abs.pos. child");
    elem.style.justifyItems = "";
    item.style.justifySelf = "left";
    is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item");
    item.style.justifySelf = "right";
    is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item");
    item.style.justifySelf = "right safe";
    is(getComputedJustifySelf(item), 'right safe', "justify-self:'right safe' computes to 'right safe' on grid item");
    item.style.justifySelf = "";
    abs.style.justifySelf = "right";
    is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on grid container abs.pos. child");
    abs.style.justifySelf = "";
    elem.style.justifyItems = "";
    item.style.justifySelf = "";
  }
  testGridJustifyItemsSelf(document.getElementById("gridContainer"));
  testGridJustifyItemsSelf(document.getElementById("gridContainerFlex"));

  // 
  // align-content tests:
  //
  //// Block tests
  var elem = document.body;
  var child = document.getElementById("display");
  var abs = document.getElementById("absChild");
  is(getComputedAlignContent(elem), 'normal', "default align-content value for block container");
  is(getComputedAlignContent(child), 'normal', "default align-content value for block child");
  is(getComputedAlignContent(abs), 'normal', "default align-content value for block container abs.pos. child");
  elem.style.alignContent = "end";
  is(getComputedAlignContent(child), 'normal', "default align-content isn't affected by parent align-content value for in-flow child");
  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
  elem.style.alignContent = "left";
  is(getComputedAlignContent(elem), 'left', "align-content:left computes to left on block child");
  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
  elem.style.alignContent = "right";
  is(getComputedAlignContent(elem), 'right', "align-content:right computes to right on block child");
  is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child");
  elem.style.alignContent = "right safe";
  is(getComputedAlignContent(elem), 'right safe', "align-content:'right safe' computes to 'align-content:right safe'");
  elem.style.alignContent = "";
  child.style.alignContent = "left";
  is(getComputedAlignContent(child), 'left', "align-content:left computes to left on block child");
  child.style.alignContent = "right";
  is(getComputedAlignContent(child), 'right', "align-content:right computes to right on block child");
  child.style.alignContent = "left safe";
  is(getComputedAlignContent(child), 'left safe', "align-content:left computes to 'left safe' on block child");
  child.style.alignContent = "";
  abs.style.alignContent = "right";
  is(getComputedAlignContent(abs), 'right', "align-content:right computes to right on block container abs.pos. child");
  abs.style.alignContent = "";

  //// Flexbox tests
  function testFlexAlignContent(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedAlignContent(elem), 'normal', "default align-content value for flex container");
    is(getComputedAlignContent(item), 'normal', "default align-content value for flex item");
    is(getComputedAlignContent(abs), 'normal', "default align-content value for flex container abs.pos. child");
    elem.style.alignContent = "flex-end safe";
    is(getComputedAlignContent(elem), 'flex-end safe', "align-content:'flex-end safe' computes to itself for flex container");
    is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for flex item");
    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for flex container abs.pos. child");
    // XXX TODO: add left/right tests (bug 1221565)
    elem.style.alignContent = "";
  }
  testFlexAlignContent(document.getElementById("flexContainer"));
  testFlexAlignContent(document.getElementById("flexContainerGrid"));

  //// Grid tests
  function testGridAlignContent(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedAlignContent(elem), 'normal', "default align-content value for grid container");
    is(getComputedAlignContent(item), 'normal', "default align-content value for grid item");
    is(getComputedAlignContent(abs), 'normal', "default align-content value for grid container abs.pos. child");
    elem.style.alignContent = "end safe";
    is(getComputedAlignContent(elem), 'end safe', "align-content:'end safe' computes to itself on grid container");
    is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for grid item");
    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child");
    elem.style.alignContent = "left";
    is(getComputedAlignContent(elem), 'left', "align-content:left computes to left on grid container");
    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child");
    elem.style.alignContent = "right";
    is(getComputedAlignContent(elem), 'right', "align-content:right computes to right on grid container");
    is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child");
    elem.style.alignContent = "right safe";
    item.style.alignContent = "inherit";
    abs.style.alignContent = "inherit";
    is(getComputedAlignContent(elem), 'right safe', "align-content:'right safe' computes to 'align-content:right safe' on grid container");
    is(getComputedAlignContent(item), 'right safe', "align-content:'right safe' inherits as 'align-content:right safe' to grid item");
    is(getComputedAlignContent(abs), 'right safe', "align-content:'right safe' inherits as 'align-content:right safe' to grid container abs.pos. child");
    item.style.alignContent = "left";
    is(getComputedAlignContent(item), 'left', "align-content:left computes to left on grid item");
    item.style.alignContent = "right";
    is(getComputedAlignContent(item), 'right', "align-content:right computes to right on grid item");
    item.style.alignContent = "right safe";
    is(getComputedAlignContent(item), 'right safe', "align-content:'right safe' computes to 'right safe' on grid item");
    item.style.alignContent = "";
    abs.style.alignContent = "right";
    is(getComputedAlignContent(abs), 'right', "align-content:right computes to right on grid container abs.pos. child");
    abs.style.alignContent = "";
    elem.style.alignContent = "";
    item.style.alignContent = "";
  }
  testGridAlignContent(document.getElementById("gridContainer"));
  testGridAlignContent(document.getElementById("gridContainerFlex"));


  // 
  // justify-content tests:
  //
  //// Block tests
  var elem = document.body;
  var child = document.getElementById("display");
  var abs = document.getElementById("absChild");
  is(getComputedJustifyContent(elem), 'normal', "default justify-content value for block container");
  is(getComputedJustifyContent(child), 'normal', "default justify-content value for block child");
  is(getComputedJustifyContent(abs), 'normal', "default justify-content value for block container abs.pos. child");
  elem.style.justifyContent = "end";
  is(getComputedJustifyContent(child), 'normal', "default justify-content isn't affected by parent justify-content value for in-flow child");
  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
  elem.style.justifyContent = "left";
  is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on block child");
  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
  elem.style.justifyContent = "right";
  is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on block child");
  is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child");
  elem.style.justifyContent = "right safe";
  is(getComputedJustifyContent(elem), 'right safe', "justify-content:'right safe' computes to 'justify-content:right safe'");
  elem.style.justifyContent = "";
  child.style.justifyContent = "left";
  is(getComputedJustifyContent(child), 'left', "justify-content:left computes to left on block child");
  child.style.justifyContent = "right";
  is(getComputedJustifyContent(child), 'right', "justify-content:right computes to right on block child");
  child.style.justifyContent = "left safe";
  is(getComputedJustifyContent(child), 'left safe', "justify-content:left computes to 'left safe' on block child");
  child.style.justifyContent = "";
  abs.style.justifyContent = "right";
  is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on block container abs.pos. child");
  abs.style.justifyContent = "";

  //// Flexbox tests
  function testFlexJustifyContent(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedJustifyContent(elem), 'normal', "default justify-content value for flex container");
    is(getComputedJustifyContent(item), 'normal', "default justify-content value for flex item");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content value for flex container abs.pos. child");
    elem.style.justifyContent = "flex-end safe";
    is(getComputedJustifyContent(elem), 'flex-end safe', "justify-content:'flex-end safe' computes to itself for flex container");
    is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for flex item");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for flex container abs.pos. child");
    // XXX TODO: add left/right tests (bug 1221565)
    elem.style.justifyContent = "";
  }
  testFlexJustifyContent(document.getElementById("flexContainer"));
  testFlexJustifyContent(document.getElementById("flexContainerGrid"));

  //// Grid tests
  function testGridJustifyContent(elem) {
    var item = elem.firstChild;
    var abs = elem.children[1];
    is(getComputedJustifyContent(elem), 'normal', "default justify-content value for grid container");
    is(getComputedJustifyContent(item), 'normal', "default justify-content value for grid item");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content value for grid container abs.pos. child");
    elem.style.justifyContent = "end safe";
    is(getComputedJustifyContent(elem), 'end safe', "justify-content:'end safe' computes to itself on grid container");
    is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for grid item");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
    elem.style.justifyContent = "left";
    is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on grid container");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
    elem.style.justifyContent = "right";
    is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on grid container");
    is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child");
    elem.style.justifyContent = "right safe";
    item.style.justifyContent = "inherit";
    abs.style.justifyContent = "inherit";
    is(getComputedJustifyContent(elem), 'right safe', "justify-content:'right safe' computes to 'justify-content:right safe' on grid container");
    is(getComputedJustifyContent(item), 'right safe', "justify-content:'right safe' inherits as 'justify-content:right safe' to grid item");
    is(getComputedJustifyContent(abs), 'right safe', "justify-content:'right safe' inherits as 'justify-content:right safe' to grid container abs.pos. child");
    item.style.justifyContent = "left";
    is(getComputedJustifyContent(item), 'left', "justify-content:left computes to left on grid item");
    item.style.justifyContent = "right";
    is(getComputedJustifyContent(item), 'right', "justify-content:right computes to right on grid item");
    item.style.justifyContent = "right safe";
    is(getComputedJustifyContent(item), 'right safe', "justify-content:'right safe' computes to 'right safe' on grid item");
    item.style.justifyContent = "";
    abs.style.justifyContent = "right";
    is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on grid container abs.pos. child");
    abs.style.justifyContent = "";
    elem.style.justifyContent = "";
    item.style.justifyContent = "";
  }
  testGridJustifyContent(document.getElementById("gridContainer"));
  testGridJustifyContent(document.getElementById("gridContainerFlex"));
}

main();

</script>
</pre>
</body>
</html>
